/* eslint-disable @typescript-eslint/no-explicit-any */
import { useRef } from 'react' // React属性
import { useNavigate } from 'react-router-dom' // 路由
import { useDispatch, useSelector } from "react-redux" // redux引入
import './index.css' // 页面样式
import { NavBar, Swiper } from 'antd-mobile' // 三方UI组件
import TextDialog from './components/text-dialog' // 自定义组件文本弹窗
import { enterMent, realTimeMent, toolMent } from './index' // 宫格数据
import { IGridList } from './index.type' // 类型声明
import '../../utils/snow.js' // 雪花飘飘

interface IGridProps {
  list: IGridList[];
  No: string
}

function MySwiper({ list, No }: IGridProps) {

  /* 声明路由 */
  const navigate = useNavigate();

  /* redux */
  const settingSwiper = useSelector((state: any) => state.swiper) // 获取音乐设置
  const dispatch = useDispatch<any>() // 声明dispatch

  console.log(settingSwiper);


  /* 声明变量 */
  const TextDialogRef = useRef<any>(null)

  /* 事件函数 */
  const goToPage = (url: string, type?: string,index?:number) => {
    if (type === 'dialog') {
      TextDialogRef.current?.onDialogText(url)
    } else {
      console.log(index);
      const SwiperNo = settingSwiper
      SwiperNo[No] = index
      dispatch.swiper.updataState(SwiperNo)
      navigate(url)
    }
  }
  return (
    <>
      <Swiper defaultIndex={settingSwiper[No]} slideSize={40} trackOffset={50} indicator={false} loop stuckAtBoundary={false}>
        {list.map((item, index) => {
          return (
            <Swiper.Item key={index}>
              <div className='Swiper-item' key={index} onClick={() => goToPage(item.url, item.type,index)}>
                <div className='item'>
                  <img src={item.img} alt="" />
                  <p>{item.name}</p>
                </div>
              </div>
            </Swiper.Item>
          )
        })}
      </Swiper>
      <TextDialog ref={TextDialogRef}></TextDialog>
    </>
  );
}

function MyHome() {

  return (
    <>
      <div className="app-container">
        <div className='v-bg'></div>
        {/* 导航栏 */}
        <NavBar backIcon={false}>小冰工具箱</NavBar>
        <div className='conetnt'>
          {/* 娱乐类 */}
          <h3>娱乐类</h3>
          <MySwiper list={enterMent} No={'enterNo'}></MySwiper>
          {/* 实时类 */}
          <h3>实时类</h3>
          <MySwiper list={realTimeMent} No={'realTimeNo'}></MySwiper>
          {/* 工具类 */}
          <h3>工具类</h3>
          <MySwiper list={toolMent} No={'toolNo'}></MySwiper>
        </div>
      </div>
    </>
  )
}

export default MyHome